// --------------------------- 获取分类并渲染 --------------------------------
function renderCategory() {
  $.ajax({
    url: '/my/category/list',
    success: function (res) {
      if (res.status === 0) {
        let str = '';
        res.data.forEach(item => {
          str += `
          <tr>
            <td>${item.name}</td>
            <td>${item.alias}</td>
            <td>
              <button data-id="${item.id}" data-name="${item.name}" data-alias="${item.alias}" type="button" class="layui-btn layui-btn-xs">编辑</button>
              <button data-id="${item.id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger">删除</button>
            </td>
          </tr>
          `;
        });
        // 遍历完成后，将拼接好的 str 放到 tbody中
        $('tbody').html(str);
      }
    }
  });
}

renderCategory();


// ---------------------------   添加分类   --------------------------------
let addIndex;
// 1. 点击 添加类别 ，先出现弹出层
$('button:contains("添加类别")').on('click', function () {
  addIndex = layer.open({
    // 这里的参数就是目录中的基础参数
    type: 1,
    title: '添加分类',
    content: $('#tpl-add').html(),
    area: ['500px', '250px'],
    id: 'add'
  });
})

// 2. 表单提交，完成添加
$('body').on('submit', '#add-form', function (e) {
  e.preventDefault();
  $.ajax({
    url: '/my/category/add',
    type: 'POST',
    data: $(this).serialize(),
    success: function (res) {
      if (res.status === 0) {
        layer.msg(res.message);
        renderCategory(); // 更新页面数据
        layer.close(addIndex); // 关闭弹出层
      }
    }
  });
});



// ---------------------------   删除分类   --------------------------------
// 事件委托的方式注册单击事件 --> 获取id --> 询问 --> Ajax提交
$('tbody').on('click', 'button:contains("删除")', function () {
  // 获取id
  let id = $(this).data('id'); // data-xxx="xxxx"
  // 询问
  layer.confirm("确定要删除吗？", { icon: 6, id: 'delete' }, function (index) {
    // 发送ajax请求
    $.ajax({
      url: '/my/category/delete',
      data: { id: id }, // id=22  { id: 22 }
      success: function (res) {
        if (res.status === 0) {
          layer.msg(res.message);
          renderCategory();
        }
      }
    });
    // 关闭弹层
    layer.close(index);
  });
})


// ---------------------------   修改分类   --------------------------------
let editIndex;
// 1. 点击 编辑 按钮 ，出现弹层
$('tbody').on('click', 'button:contains("编辑")', function () {
  // 点击之后，获取自定义属性值
  let shuju = $(this).data(); // 不给 data() 传递参数，表示获取全部的 data-xxx 属性值

  editIndex = layer.open({
    id: 'edit',
    type: 1,
    title: '修改分类',
    content: $('#tpl-edit').html(), // 2. 设置弹出中的表单
    area: ['500px', '250px'],
    success: function () { // 弹出层 弹出后执行这个success函数
      // console.log(shuju); // {alias: "sports", name: "体育", id: 1}
      // 使用layui的 form.val() 方法，快速的数据回填
      let form = layui.form;
      // form.val('表单lay-filter属性值', '对象格式的数据(对象的键===input的name值)');
      form.val('edit', shuju); // // 3. 数据回填
    }
  });
})

// 4. 表单提交，完成修改
$('body').on('submit', '#edit-form', function (e) {
  e.preventDefault();
  $.ajax({
    url: '/my/category/update',
    type: 'POST',
    data: $(this).serialize(), // id  name  alias
    success: function (res) {
      if (res.status === 0) {
        layer.msg(res.message);
        renderCategory(); // 更新页面数据
        layer.close(editIndex); // 关闭弹出层
      }
    }
  });
});

